<template>
  <el-dialog title="添加管家" :close-on-click-modal="false" :visible.sync="messageShow" class="view">
    <div class="mod-config">
      <div class="otherContent">
        <el-row :gutter="20">
          <el-col :span="5">管家手机号</el-col>
          <el-col :span="9">
            <el-select v-model="rember"
                       filterable
                       remote
                       reserve-keyword
                       placeholder="请输入手机号"
                       :remote-method="remoteMethod"
                       :loading="loading">
              <el-option v-for="(item, index) in steward" :key="item.id" :label="item.phone" :value="index"></el-option>
            </el-select>
          </el-col>
          <el-col :span="9" style="font-size: 12px;color: red;">* 请输入6位以上数字，出现搜索结果</el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="5">管家昵称</el-col>
          <el-col :span="19">{{ rember === ''?'':steward[rember].nickname }}</el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="5">管家uid</el-col>
          <el-col :span="19">{{ rember === ''?'':steward[rember].userId }}</el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="5">管家微信号</el-col>
          <el-col :span="19">{{ rember === ''?'':steward[rember].wxNumber }}</el-col>
        </el-row>
        <el-row :gutter="20" style="margin-bottom: 15px;">
          <el-col :span="5">管家会员身份</el-col>
          <el-col :span="19">{{ rember === ''?'':steward[rember].grade==1?'会员':steward[rember].grade==2?'经理':'总监' }}</el-col>
        </el-row>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="setButler">确定</el-button>
      <el-button @click="messageShow = false">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        steward: [],
        rember: '',
        messageShow: false,
        loading: false,
      }
    },
    props: ['id', 'grade'],
    methods: {
      initData() {
        this.messageShow = true
        this.steward = []
        // this.$http({
        //   url: this.$http.adornUrl(`/sale/saleRelation/see/${this.grade}`),
        //   method: "get",
        // }).then(({data}) => {
        //   this.steward = data.StewardShipInfoVo
        //   // if (this.stewardId) {
        //   //   data.StewardShipInfoVo.map((item, index) => {
        //   //     if (item.userId === that.stewardId) {
        //   //       that.rember = index
        //   //     }
        //   //   })
        //   // }
        // })
      },
      remoteMethod(phone) {
        if (phone.length >6 ) {
          this.loading = true;
          this.$http({
            url: this.$http.adornUrl(`/sale/saleRelation/see/${this.grade}`),
            method: "get",
            params: this.$http.adornParams({phone})
          }).then(({data}) => {
            this.steward = data.StewardShipInfoVo
            this.loading = false;
            // if (this.stewardId) {
            //   data.StewardShipInfoVo.map((item, index) => {
            //     if (item.userId === that.stewardId) {
            //       that.rember = index
            //     }
            //   })
            // }
          })
        } else {
          this.steward = [];
        }
      },
      setButler() {
        const data = {
          userId: this.id,
          superiorUid: this.steward[this.rember].userId
        }
        this.$http({
          url: this.$http.adornUrl(`/sale/saleRelation/update`),
          method: "post",
          data
        }).then(({data}) => {
          this.messageShow = false
          this.rember = ''
          this.$emit('refresh')
        })
      }
    }
  };
</script>
<style scoped>
  .otherContent {
    padding: 0 60px;
  }

  .el-row {
    display: flex;
    align-items: center;
    height: 45px;
    font-size: 16px;
  }
</style>
